<template>
  <div class="login">
    <div class="title">景区后台管理系统</div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="密码" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="ifAutoLogin">自动登录</el-checkbox>
        <!-- <span >注册</span> -->
        <router-link to="/register" style="vertical-align: top; float: right">注册</router-link>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')" style="width: 100%">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {},
  name: '',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      ifAutoLogin: false
    }
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await this.$http.post('/admin/login', this.form)
          if (res.error !== -1) {
            window.localStorage.setItem('token', res.data.token)
            this.$router.push('/')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  width: 400px;
  height: 350px;
  margin: 100px auto;
  background: #fff;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.4);
  .title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 50px;
  }
}
</style>
